<template>

<view class="page">
		<image src="@/static/images/img/bg.png" class="w-[100%] h-[894rpx] z-[-1] absolute top-[0]" />
		<view class="mx-[32rpx]" :style="{
			paddingTop: menuButtonInfoBottom + 'px'
		}">
			<view class="flex justify-between items-center ">
				<view class="flex">
					<!-- 头像点击区域 -->
					<view @click="handleAvatarClick">
						<up-avatar size="104rpx" :src="userStore?.avatar"></up-avatar>
					</view>
					<view class="ml-[28rpx]">
						<view class="flex items-center">
							<!-- 昵称点击区域 -->
							<view @click="handleNicknameClick"
								class=" text-[32rpx] font-[500] text-[#000000] leading-[48rpx] text-left font-[PingFangSC]">
								{{ userStore?.userName }}
							</view>
							<image  v-if="userStore.isLogin" src="@/static/images/img/rz.png" class="w-[36rpx] h-[36rpx] ml-[12rpx]" />
							<view  @click="push(`/pages_qc/mycertification/mycertification`)"
								class="ml-[2rpx] font-[600] text-[24rpx] text-[#A56F35] leading-[32rpx] text-left font-[PingFangSC]">
								认证车商
							</view>
						</view>
						<view
							class="font-[500] text-[24rpx] text-[#999999] leading-[36rpx] text-left font-[PingFang-SC]">
							{{ userStore?.phone }}
						</view>
					</view>
				</view>
				<view>
					<image @click="push('/pages_qc/setup/setup')" src="@/static/images/img/shezhi.png"
						class="w-[60rpx] h-[60rpx]" />
					<!-- <image src="@/static/images/img/mesg.png" class="w-[60rpx] h-[60rpx] ml-[18rpx]" /> -->
				</view>

			</view>
		</view>
		<!-- 统计数据 -->
		<view style="background: linear-gradient(to bottom, #FFF0C0 0%, #FFFFFF 100%);"
			class="flex justify-around mt-[32rpx] mx-[32rpx] w-[686rpx] h-[248rpx] rounded-[20rpx] border-[2rpx] border-white">
			<view class="flex-col justify-around items-center w-[112rpx] pt-[40rpx]">
				<view class="font-[500] text-[44rpx] text-[#000000] leading-[44rpx]  text-center font-[D-DIN-PRO]">0
				</view>
				<view
					class=" mt-[12rpx] font-[500] text-[20rpx] text-[#999999] leading-[28rpx] text-center font-[PingFang-SC]">
					昨日+0</view>
				<view
					class=" mt-[4rpx] font-[500] text-[20rpx] text-[#999999] leading-[28rpx] text-center font-[PingFang-SC]">
					今日<text class="text-[#35BC46]">+0</text></view>
				<view
					class="mt-[16rpx] font-[500] text-[28rpx] text-[#000000] leading-[40rpx] text-center font-[PingFang-SC]">
					浏览数</view>
			</view>
			<view class="flex-col justify-around items-center w-[112rpx] pt-[40rpx]">
				<view class="font-[500] text-[44rpx] text-[#000000] leading-[44rpx]  text-center font-[D-DIN-PRO]">0
				</view>
				<view
					class=" mt-[12rpx] font-[500] text-[20rpx] text-[#999999] leading-[28rpx] text-center font-[PingFang-SC]">
					昨日+0</view>
				<view
					class=" mt-[4rpx] font-[500] text-[20rpx] text-[#999999] leading-[28rpx] text-center font-[PingFang-SC]">
					今日<text class="text-[#35BC46]">+0</text></view>
				<view
					class="mt-[16rpx] font-[500] text-[28rpx] text-[#000000] leading-[40rpx] text-center font-[PingFang-SC]">
					联系他人</view>
			</view>
			<view class="flex-col justify-around items-center w-[112rpx] pt-[40rpx]">
				<view class="font-[500] text-[44rpx] text-[#000000] leading-[44rpx]  text-center font-[D-DIN-PRO]">0
				</view>
				<view
					class=" mt-[12rpx] font-[500] text-[20rpx] text-[#999999] leading-[28rpx] text-center font-[PingFang-SC]">
					昨日+0</view>
				<view
					class=" mt-[4rpx] font-[500] text-[20rpx] text-[#999999] leading-[28rpx] text-center font-[PingFang-SC]">
					今日<text class="text-[#35BC46]">+0</text></view>
				<view
					class="mt-[16rpx] font-[500] text-[28rpx] text-[#000000] leading-[40rpx] text-center font-[PingFang-SC]">
					被浏览数</view>
			</view>
			<view class="flex-col justify-around items-center w-[112rpx] pt-[40rpx]">
				<view class="font-[500] text-[44rpx] text-[#000000] leading-[44rpx]  text-center font-[D-DIN-PRO]">0
				</view>
				<view
					class=" mt-[12rpx] font-[500] text-[20rpx] text-[#999999] leading-[28rpx] text-center font-[PingFang-SC]">
					昨日+0</view>
				<view
					class=" mt-[4rpx] font-[500] text-[20rpx] text-[#999999] leading-[28rpx] text-center font-[PingFang-SC]">
					今日<text class="text-[#35BC46]">+0</text></view>
				<view
					class="mt-[16rpx] font-[500] text-[28rpx] text-[#000000] leading-[40rpx] text-center font-[PingFang-SC]">
					被联系数</view>
			</view>
		</view>
		<view class="w-[618rpx] h-[197rpx] mx-[66rpx] flex justify-between mt-[40rpx]">
			<image src="@/static/images/img/qqq.jpg" class="w-[618rpx] h-[197rpx] z-[-1] absolute" />
			<view class="pt-[28rpx] pl-[26rpx]">
				<view class="text-[24rpx] text-[#000000] font-[600] leading-[36rpx] text-left font-[PingFangSC]">账户剩余零钱
				</view>
				<view class="mt-[8rpx] font-[500] text-[40rpx] text-white leading-[36rpx] text-left font-[D-DIN-PRO]">
					{{ (userStore.balance/1).toFixed(2) ||'0.00'  }}</view>
			</view>
			<!-- 账户余额 -->
			<view class="pt-[38rpx] pr-[28rpx]">
				<up-button type="primary" @click="push('/pages_qc/totalassets/totalassets')" text="去查看" :customStyle="{
			width: '132rpx',
			height: '60rpx',
			background: 'linear-gradient( 98deg, #FFF8DD 0%, #FFEAA2 100%)',
			borderRadius: '30rpx',
			fontSize: '28rpx',
			padding: '10rpx 24rpx',
			border: '0',
			color: '#000000',
			fontWeight: '500',
		}"></up-button>
			</view>
		</view>
		<view class="mx-[32rpx] relative mt-[-81rpx]">
			<image src="@/static/images/img/tm.png" class="w-[686rpx] h-[244rpx] absolute z-[-1]" />
			<view
				class="pt-[34rpx] ml-[32rpx] font-[500] text-[32rpx] text-[#000000] leading-[48rpx] text-left font-[PingFangSC]">
				我的钱包</view>
			<view class="flex justify-around mt-[22rpx]">
				<view class="w-[112rpx] ">
					<view class="font-[500] text-[48rpx] text-[#FFB800] leading-[48rpx] text-center font-[D-DIN-PRO]">
						{{ (userStore.deposit/1).toFixed(2) ||'0.00' }}</view>
					<view
						class="mt-[24rpx] font-[500] text-[28rpx] text-[#000000] leading-[40rpx] text-left font-[PingFangSC]">
						保障金额</view>
				</view>
				<view class="w-[112rpx] ">
					<view class="font-[500] text-[48rpx] text-[#FFB800] leading-[48rpx] text-center font-[D-DIN-PRO]">
						{{ (userStore.superClue/1).toFixed(2) ||'0.00' }}</view>
					<view
						class="mt-[24rpx] font-[500] text-[28rpx] text-[#000000] leading-[40rpx] text-left font-[PingFangSC]">
						线索余额</view>
				</view>
				<view class="w-[112rpx] ">
					<view class="font-[500] text-[48rpx] text-[#FFB800] leading-[48rpx] text-center font-[D-DIN-PRO]">
						0.00</view>
					<view
						class="mt-[24rpx] font-[500] text-[28rpx] text-[#000000] leading-[40rpx] text-left font-[PingFangSC]">
						活动红包</view>
				</view>
				<!-- <view class="w-[112rpx]">
					<view class="font-[500] text-[48rpx] text-[#FFB800] leading-[48rpx] text-center font-[D-DIN-PRO]">
						0.00</view>
					<view
						class="mt-[24rpx] font-[500] text-[28rpx] text-[#000000] leading-[40rpx] text-left font-[PingFang-SC]">
						活动红包</view>
				</view> -->
			</view>
		</view>
		<view class="mx-[32rpx] mt-[60rpx] w-[686rpx] h-[188rpx]" @click="push('/pages_qc/collect_cars/index')">
			<image src="https://falvren.oss-cn-beijing.aliyuncs.com/2025061123293621648.png" class="w-[686rpx] h-[188rpx] absolute z-[-1]" />
		</view>
		<view style="background: linear-gradient( to bottom, #FFF9E8  0%, #FFFFFF 60%);"
			class="w-[686rpx] mt-[24rpx] mx-[32rpx] rounded-[20rpx]">
			<view
				class="pt-[24rpx] ml-[30rpx] font-[500] text-[32rpx] text-[#000000] leading-[48rpx] text-left font-[PingFangSC]">
				我的发布
			</view>
			<view class="w-[100%] grid__  ">
				<view @click="kfa" class="w-[112rpx]  flex flex-col items-center">
					<image src="@/static/images/img/dp.png" class="w-[72rpx] h-[72rpx]  " />
					<view class="mt-[16rpx] text-[24rpx] font-[500] text-[#000000] font-[PingFang-SC]">我的店铺</view>
				</view>
				<view  @click="push(`/pages_qc/my_car_source/index`)"  class="w-[112rpx] flex flex-col items-center">
					<image src="@/static/images/img/cy.png" class="w-[72rpx] h-[72rpx]  " />
					<view class="mt-[16rpx] text-[24rpx] font-[500] text-[#000000] font-[PingFang-SC]">车源管理</view>
				</view>
				<view @click="kfa"  class="w-[112rpx]  flex flex-col items-center">
					<image src="@/static/images/img/jl.png" class="w-[72rpx] h-[72rpx]  " />
					<view class="mt-[16rpx] text-[24rpx] font-[500] text-[#000000] font-[PingFang-SC]">记录中心</view>
				</view>
				<view @click="kfa"  class="w-[112rpx] flex flex-col items-center">
					<image src="@/static/images/img/gc.png" class="w-[72rpx] h-[72rpx]  " />
					<view class="mt-[16rpx] text-[24rpx] font-[500] text-[#000000] font-[PingFang-SC]">我的广场</view>
				</view>
				<view  @click="push(`/pages_qc/clue_package/index`)" class=" w-[118rpx]  flex flex-col items-center">
					<image src="@/static/images/img/cj.png" class="w-[72rpx] h-[72rpx]  " />
					<view class="mt-[16rpx] text-[24rpx] font-[500] text-[#000000] font-[PingFang-SC]">成交套餐</view>
				</view>
			</view>
		</view>
		 <view  @click="kfa" style="background: linear-gradient( to bottom, #FFF9E8  0%, #FFFFFF 60%);" class="mt-[24rpx] rounded-[20rpx] mx-[32rpx] ">
			<view
				class="pt-[24rpx] pl-[30rpx] font-[500] text-[32rpx] text-[#000000] leading-[48rpx] text-left font-[PingFang-SC]">
				我的订单
			</view>
			<view class="w-[100%] grid__  ">
				<view class="w-[112rpx]  flex flex-col items-center">
					<image src="@/static/images/img/djbb.png" class="w-[72rpx] h-[72rpx]  " />
					<view class="mt-[16rpx] text-[24rpx] font-[500] text-[#000000] font-[PingFang-SC]">定金保障</view>
				</view>
				<view class="w-[112rpx]  flex flex-col items-center">
					<image src="@/static/images/img/mcdd.png" class="w-[72rpx] h-[72rpx]  " />
					<view class="mt-[16rpx] text-[24rpx] font-[500] text-[#000000] font-[PingFang-SC]">买车订单</view>
				</view>
				<view class="w-[112rpx]  flex flex-col items-center">
					<image src="@/static/images/img/mmcdd.png" class="w-[72rpx] h-[72rpx]  " />
					<view class="mt-[16rpx] text-[24rpx] font-[500] text-[#000000] font-[PingFang-SC]">卖车订单</view>
				</view>
				<view class="w-[112rpx]  flex flex-col items-center">
					<image src="@/static/images/img/jcdd.png" class="w-[72rpx] h-[72rpx]  " />
					<view class="mt-[16rpx] text-[24rpx] font-[500] text-[#000000] font-[PingFang-SC]">检测订单</view>
				</view>
			</view>
		</view> 
		 <view @click="kfa" style="background: linear-gradient( to bottom, #FFF9E8  0%, #FFFFFF 60%);"
			class="w-[686rpx] h-[244rpx] rounded-[20rpx] mt-[24rpx] mx-[32rpx] ">
			<view
				class="pt-[24rpx] ml-[30rpx] font-[500] text-[32rpx] text-[#000000] leading-[48rpx] text-left font-[PingFang-SC]">
				拓圈人脉
			</view>
			<view class="w-[100%] grid__  ">
				<view class="w-[112rpx]  flex flex-col items-center">
					<image src="@/static/images/img/pyq.png" class="w-[72rpx] h-[72rpx]  " />
					<view class="mt-[16rpx] text-[24rpx] font-[500] text-[#000000] font-[PingFang-SC]">朋友圈</view>
				</view>
				<view class="w-[112rpx]  flex flex-col items-center">
					<image src="@/static/images/img/cssq.png" class="w-[72rpx] h-[72rpx]  " />
					<view class="mt-[16rpx] text-[24rpx] font-[500] text-[#000000] font-[PingFang-SC]">车商社群</view>
				</view>

			</view>
		</view>
		<!-- 其他功能 -->
		<view @click="kfa">
			<view style="background-color: #FFFFFF" class="w-[686rpx] h-[244rpx] rounded-[20rpx] mt-[24rpx] mx-[32rpx] ">
				<view
					class="pt-[24rpx] ml-[30rpx] font-[500] text-[32rpx] text-[#000000] leading-[48rpx] text-left font-[PingFang-SC]">
					其他功能
				</view>
				<view class="w-[100%] grid__  ">
					<view class="w-[112rpx]  flex flex-col items-center">
						<image src="@/static/images/img/wdsc.png" class="w-[72rpx] h-[72rpx]  " />
						<view class="mt-[16rpx] text-[24rpx] font-[500] text-[#000000] font-[PingFang-SC]">我的收藏</view>
					</view>
					<view class="w-[112rpx]  flex flex-col items-center">
						<image src="@/static/images/img/wdht.png" class="w-[72rpx] h-[72rpx]  " />
						<view class="mt-[16rpx] text-[24rpx] font-[500] text-[#000000] font-[PingFang-SC]">我的合同</view>
					</view>
					<view class="w-[112rpx]  flex flex-col items-center">
						<image src="@/static/images/img/ptgz.png" class="w-[72rpx] h-[72rpx]  " />
						<view class="mt-[16rpx] text-[24rpx] font-[500] text-[#000000] font-[PingFang-SC]">平台规则</view>
					</view>
					<view class="w-[112rpx]  flex flex-col items-center">
						<image src="@/static/images/img/kfzx.png" class="w-[72rpx] h-[72rpx]  " />
						<view class="mt-[16rpx] text-[24rpx] font-[500] text-[#000000] font-[PingFang-SC]">客服中心</view>
					</view>

				</view>
			</view>
		</view>

	</view>
	<popup-login v-model="userStore.showLoginPopup" />
	
	<!-- 编辑头像弹窗 -->
	<uni-popup ref="editAvatarPopup" type="center" :mask-click="false">
		<view class="edit-popup">
			<view class="popup-header">
				<text class="popup-title">修改头像</text>
				<uni-icons type="closeempty" size="20" @click="closeAvatarPopup"></uni-icons>
			</view>
			
			<view class="popup-content">
				<view class="form-item">
					<view class="avatar-container">
						<avatar-upload 
							v-model="editAvatarForm.avatar" 
							:size="150" 
							:token="userStore.token"
							text_mag="点击上传头像"
							rounded="50%"
							:is_avatar="true"
						/>
					</view>
				</view>
			</view>
			
			<view class="popup-footer">
				<up-button 
					text="取消" 
					type="info" 
					plain
					@click="closeAvatarPopup"
					:customStyle="{
						width: '140rpx',
						height: '80rpx',
						marginRight: '20rpx'
					}"
				/>
				<up-button 
					text="保存" 
					type="primary"
					:loading="saveAvatarLoading"
					@click="saveAvatar"
					:customStyle="{
						width: '140rpx',
						height: '80rpx'
					}"
				/>
			</view>
		</view>
	</uni-popup>
	
	<!-- 编辑昵称弹窗 -->
	<uni-popup ref="editNicknamePopup" type="center" :mask-click="false">
		<view class="edit-popup">
			<view class="popup-header">
				<text class="popup-title">修改昵称</text>
				<uni-icons type="closeempty" size="20" @click="closeNicknamePopup"></uni-icons>
			</view>
			
			<view class="popup-content">
				<view class="form-item">
					<text class="form-label">昵称</text>
					<uni-easyinput 
						v-model="editNicknameForm.nickName" 
						placeholder="请输入昵称"
						maxlength="20"
						:clearable="true"
					/>
				</view>
			</view>
			
			<view class="popup-footer">
				<up-button 
					text="取消" 
					type="info" 
					plain
					@click="closeNicknamePopup"
					:customStyle="{
						width: '140rpx',
						height: '80rpx',
						marginRight: '20rpx'
					}"
				/>
				<up-button 
					text="保存" 
					type="primary"
					:loading="saveNicknameLoading"
					@click="saveNickname"
					:customStyle="{
						width: '140rpx',
						height: '80rpx'
					}"
				/>
			</view>
		</view>
	</uni-popup>
	
	<tabBar />
</template>

<script setup>
import {
	onLoad,onShow
} from '@dcloudio/uni-app'
import {
	ref
} from 'vue'
import { wxLogin, setNewUser } from '@/api/oauth';
import { getWxCode } from '@/utils/geek';
import { setToken } from '@/utils/auth';
import useUserStore from '@/store/modules/user';
import { setInfo } from '@/api/system/user';
import AvatarUpload from '@/components/avatar-upload/avatar-upload.vue';

const userStore = useUserStore();
const menuButtonInfoBottom = ref(90) // 胶囊按钮信息
const src = ref('') // 用户头像
const token = ref(null);
const show = ref(false); // 登录弹窗显示状态
const loginLoading = ref(false);
const userId = ref(null);

// 编辑头像相关
const editAvatarPopup = ref(null);
const saveAvatarLoading = ref(false);
const editAvatarForm = ref({
	avatar: ''
});

// 编辑昵称相关
const editNicknamePopup = ref(null);
const saveNicknameLoading = ref(false);
const editNicknameForm = ref({
	nickName: ''
});

onLoad(() => {
	menuButtonInfoBottom.value = uni.getMenuButtonBoundingClientRect().bottom || 90;
	console.log(uni.getMenuButtonBoundingClientRect())
})

// 新增：页面显示时刷新用户信息
onShow(() => {
  // 如果用户已登录，则刷新用户信息
  if (userStore.isLogin) {
    userStore.getInfo(userStore.userId);
  }
});

// 处理头像点击
const handleAvatarClick = () => {
  if (!userStore.isLogin) {
    userStore.showLogin();
  } else {
    // 已登录，打开头像编辑弹窗
    openAvatarPopup();
  }
}

// 处理昵称点击
const handleNicknameClick = () => {
  if (!userStore.isLogin) {
    userStore.showLogin();
  } else {
    // 已登录，打开昵称编辑弹窗
    openNicknamePopup();
  }
}

// 打开头像编辑弹窗
const openAvatarPopup = () => {
	// 初始化表单数据
	editAvatarForm.value = {
		avatar: userStore.avatar || ''
	};
	editAvatarPopup.value?.open();
}

// 关闭头像编辑弹窗
const closeAvatarPopup = () => {
	editAvatarPopup.value?.close();
}

// 保存头像
const saveAvatar = async () => {
	if (!editAvatarForm.value.avatar) {
		uni.$u.toast('请选择头像');
		return;
	}
	
	saveAvatarLoading.value = true;
	
	try {
		const data = {
			avatar: editAvatarForm.value.avatar,
			userId: userStore.userId
		};
		
		const result = await setInfo(data);
		
		if (result) {
			uni.$u.toast('头像保存成功');
			// 更新用户store中的头像
			userStore.avatar = editAvatarForm.value.avatar;
			// 重新获取用户信息
			userStore.getInfo(userStore.userId);
			closeAvatarPopup();
		} else {
			uni.$u.toast('保存失败，请重试');
		}
	} catch (error) {
		console.error('保存头像失败:', error);
		uni.$u.toast('保存失败，请重试');
	} finally {
		saveAvatarLoading.value = false;
	}
}

// 打开昵称编辑弹窗
const openNicknamePopup = () => {
	// 初始化表单数据
	editNicknameForm.value = {
		nickName: userStore.nickName || ''
	};
	editNicknamePopup.value?.open();
}

// 关闭昵称编辑弹窗
const closeNicknamePopup = () => {
	editNicknamePopup.value?.close();
}

// 保存昵称
const saveNickname = async () => {
	if (!editNicknameForm.value.nickName.trim()) {
		uni.$u.toast('请输入昵称');
		return;
	}
	
	saveNicknameLoading.value = true;
	
	try {
		const data = {
			userName: editNicknameForm.value.nickName.trim(),
			userId: userStore.userId

		};
		
		const result = await setInfo(data);
		
		if (result) {
			uni.$u.toast('昵称保存成功');
			// 更新用户store中的昵称
			userStore.nickName = editNicknameForm.value.nickName;
			// 重新获取用户信息
			userStore.getInfo(userStore.userId);
			closeNicknamePopup();
		} else {
			uni.$u.toast('保存失败，请重试');
		}
	} catch (error) {
		console.error('保存昵称失败:', error);
		uni.$u.toast('保存失败，请重试');
	} finally {
		saveNicknameLoading.value = false;
	}
}


// 微信登录逻辑
const vxLogin = async (code = '') => {
	loginLoading.value = true;
	await getWxCode()
		.then(async (val) => {
			const datas = {
				code: val,
				phoneCode: code
			};
			const { data, msg } = await wxLogin('miniapp', datas).catch((e) => {
				loginLoading.value = false;
			});
			if (data?.token && data?.user?.isNew != true) {
				setUserInfo(data?.token, data?.user?.userId);
			} else if (data?.token && data?.user?.isNew == true) {
				token.value = data?.token;
				userId.value = data?.user?.userId
				show.value = true;
			} else {
				loginLoading.value = false;
				uni.$u.toast(msg);
			}
		})
		.catch((e) => {
			uni.hideLoading();
			loginLoading.value = false;
			uni.$u.toast('登录失败');
		});
};

// 获取手机号回调
const onGetPhoneNumber = (e) => {
	console.log(e);
	if (loginLoading.value) return false;
	if (!e.detail.code) {
		return uni.$u.toast('手机号获取失败');
	} else {
		vxLogin(e.detail.code);
	}
};
//提示功能在开发中
const kfa = () => {
  uni.showToast({
    title: '功能开发中',
    icon: 'none',
    duration: 2000
  })
}
// 保存用户信息
const setUserInfo = (token, userId) => {
	setToken(token);
	userStore.getInfo(userId);
	setTimeout(() => {
		loginLoading.value = false;
		uni.reLaunch({
			url: '/pages/user'
		});
	}, 1500);
}
</script>

<style lang="scss" scoped>
.grid__ {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28rpx;
	padding: 24rpx;
}

.edit-popup {
	width: 600rpx;
	background: white;
	border-radius: 20rpx;
	padding: 40rpx;
	
	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
		
		.popup-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #000;
		}
	}
	
	.popup-content {
		.form-item {
			margin-bottom: 40rpx;
			
			.form-label {
				display: block;
				font-size: 28rpx;
				color: #333;
				margin-bottom: 20rpx;
			}
			
			.avatar-container {
				display: flex;
				justify-content: center;
				padding: 20rpx 0;
			}
		}
	}
	
	.popup-footer {
		display: flex;
		justify-content: center;
		margin-top: 40rpx;
	}
}
</style>